<template>
    <div class="b-content">
        <!-- <div class="unable-style" v-if="!isAble"></div> -->
        <!-- <el-button :disabled="i.disabled" class="btn" @click="iconClick(i.type)">
                <i class="iconfont">{{i.icon}}</i>
    </el-button>-->
        <div class="icon-view" v-for="(i, index) in iconfont_list" :key="i.icon">
            <el-button :disabled="(index != 4 && index != 3 && !isMarkupEnable) || i.disabled || (index == 4 && !id)"
                class="font-btn" @click="iconClick(i.type)"
                v-if="i.icon != '\ue6a9' && i.optType.indexOf(optType) != -1 && (i.icon != '\ue7d5' && i.icon != '\ue7d9')">
                <el-tooltip :content="i.tip" placement="top" effect="dark">
                    <i class="iconfont">{{ i.icon }}</i>
                </el-tooltip>
            </el-button>
        </div>
        <div class="solid-view">
            <span class="solid"></span>
            <el-tooltip :content="$t('message.cadViewer.paramSelect.barNames.fit')" placement="top" effect="dark">
                <i class="iconfont" style="color: rgba(0, 0, 0)" @click="onResetViewClick">&#xe6b4;</i>
            </el-tooltip>
            <span class="solid"></span>
        </div>
        <!-- 字体 -->
        <div class="input-view" v-if="optType != -1">
            <el-select :disabled="!isMarkupEnable" v-model="selectedFont" :placeholder="$t(
                'message.cadViewer.paramSelect.paramHolds.selectFontHold'
            )
                " @change="onParamsChange" class="l-ipt">
                <el-option v-for="item in font" :key="item.fontValue" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <el-select :disabled="!isMarkupEnable" v-model="selectedFontSize" :placeholder="$t('message.cadViewer.paramSelect.paramHolds.fontSizeHold')
                " @change="onParamsChange" class="m-ipt">
                <el-option v-for="count in 66" :key="count + 6" :label="count + 6" :value="count + 6">{{ count + 6
                    }}</el-option>
            </el-select>
        </div>
        <div class="solid-view" v-if="optType == 0">
            <span class="solid"></span>

            <el-button :disabled="!isMarkupEnable" :class="!selectedBold ? 'font-btn' : 'font-btn-active'"
                @click="onBoldClick">
                <i class="iconfont">&#xe6b1;</i>
            </el-button>

            <el-button :disabled="!isMarkupEnable" :class="!selectedItalics ? 'font-btn' : 'font-btn-active'"
                @click="onItalicsClick">
                <i class="iconfont">&#xe6b2;</i>
            </el-button>

            <el-button :disabled="!isMarkupEnable" :class="!selectedUnderline ? 'font-btn' : 'font-btn-active'"
                @click="onUnderlineClick">
                <i class="iconfont">&#xe6b3;</i>
            </el-button>
            <span class="solid"></span>
        </div>
        <!-- 线条选择 -->
        <div class="input-view" v-if="optType == 0">
            <el-select :disabled="!isMarkupEnable" v-model="selectedLineType" :placeholder="$t('message.cadViewer.paramSelect.paramHolds.lineTypeHold')
                " @change="onParamsChange" class="l-ipt">
                <el-option v-for="item in soild" :key="item.fontValue" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <el-select :disabled="!isMarkupEnable" v-model="selectedLineWidth" :placeholder="$t('message.cadViewer.paramSelect.paramHolds.lineWidthHold')
                " @change="onParamsChange" class="m-ipt">
                <el-option v-for="count in 10" :key="count" :label="count" :value="count">{{ count }}</el-option>
            </el-select>
        </div>
        <!-- 颜色 -->
        <div class="color-view" v-if="optType == 0">
            <span class="solid"></span>
            <!-- 边框颜色 -->
            <!-- <el-tooltip
        :disabled="!isMarkupEnable"
        class="item"
        effect="dark"
        :content="$t('message.cadViewer.paramSelect.paramHolds.boldColrHold')"
        placement="bottom"
      >-->
            <!-- <el-color-picker
        :disabled="!isMarkupEnable"
        v-model="selectedLineColor"
        class="fill"
        @change="onParamsChange"
      ></el-color-picker>-->
            <el-button :disabled="!isMarkupEnable" class="font-btn">
                <i class="iconfont">&#xe828;</i>
            </el-button>
            <!-- <i class="iconfont" style="color:#c0c4cc">&#xe828;</i> -->
            <el-color-picker size="mini" v-model="selectedLineColor" @change="onParamsChange"
                :disabled="!isMarkupEnable" :predefine="predefineColors" ref="selectedLineColor"></el-color-picker>
            <!-- </el-tooltip> -->
            <!-- 填充颜色 -->
            <!-- <el-tooltip
        class="item"
        effect="dark"
        :content="$t('message.cadViewer.paramSelect.paramHolds.fillColrHold')"
        placement="bottom"
      >-->
            <!-- <el-color-picker
          :disabled="!isMarkupEnable"
          v-model="selectedFillColor"
          class="fill"
          @change="onParamsChange"
      ></el-color-picker>-->
            <el-button :disabled="!isMarkupEnable" class="font-btn">
                <i class="iconfont">&#xe829;</i>
            </el-button>
            <!-- <i class="iconfont"  style="color:#c0c4cc">&#xe829;</i> -->
            <el-color-picker size="mini" :predefine="predefineColors" v-model="selectedFillColor"
                @change="onParamsChange" :disabled="!isMarkupEnable" ref="selectedFillColor"
                style="margin-right: 6px"></el-color-picker>
            <!-- </el-tooltip> -->
            <el-select :disabled="!isMarkupEnable" v-model="selectedFillType" :placeholder="$t('message.cadViewer.paramSelect.paramHolds.fillColrHold')
                " @change="onParamsChange" class="l-ipt">
                <el-option v-for="item in fillTypeList" :key="item.fontValue" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <span class="solid"></span>
        </div>
        <div class="solid-view" v-if="optType == 0">
            <el-tooltip :disabled="!isMarkupEnable" class="item" effect="dark"
                :content="$t('message.cadViewer.paramSelect.paramHolds.layer')" placement="bottom">
                <el-button v-if="true" :disabled="!isMarkupEnable" class="font-btn" @click="iconClick('layer')">
                    <i class="iconfont">&#xe7d7;</i>
                </el-button>
            </el-tooltip>
            <el-select style="width: 180px" :disabled="!isMarkupEnable" v-model="activeLayerId"
                :placeholder="$t('message.cadViewer.layerDialog.selectTip')" class="layer-select"
                @change="onLayerChange">
                <el-option v-for="(item, index) in layersData" :key="index" :label="item.sName"
                    :value="index"></el-option>
            </el-select>

            <el-tooltip :disabled="!isMarkupEnable" class="item" effect="dark" :content="$t('message.cadViewer.paramSelect.paramHolds.hiddenLayer')
                " placement="bottom">
                <el-button v-if="true" :disabled="!isMarkupEnable" :class="showMarkups ? 'font-btn' : 'font-btn-active'"
                    @click="
                        iconClick(
                            !showMarkups ? 'show_markups' : 'hide_markups'
                        )
                        ">
                    <i class="iconfont">&#xe7d8;</i>
                </el-button>
            </el-tooltip>
        </div>
        <!-- 下载 -->
        <!-- <i class="iconfont down" @click="onDownLoadClick">&#xe6c2;</i> -->
    </div>
</template>

<script>
import { getLocalStorage } from "../../utils/storage";

export default {
    data: function () {
        return {
            iconfont_list: [
                {
                    icon: "el-icon-s-home",
                    type: "open",
                    tip: "",
                    optType: "",
                },


                // <i class="el-icon-s-home" @click="onBackToHome"></i>
                // {
                //     icon: "el-icon-s-home",
                //     type: "home",
                //     tip: this.$t("message.cadViewer.paramSelect.barNames.save"),
                //     optType: "0,1,2",
                // },
                {
                    icon: "\ue6ab",
                    type: "save",
                    tip: this.$t("message.cadViewer.paramSelect.barNames.save"),
                    optType: "0",
                    disabled: false
                },
                {
                    icon: "\ue7d9",
                    type: "save_as",
                    tip: this.$t(
                        "message.cadViewer.paramSelect.barNames.save_as"
                    ),
                    optType: "0",
                    disabled: false
                },
                // {
                //   icon: "\ue6ac",
                // },
                {
                    icon: "\ue7d5",
                    type: "print_set",
                    tip: this.$t(
                        "message.cadViewer.paramSelect.barNames.print"
                    ),
                    optType: "0",
                    disabled: false
                },
                {
                    icon: "\ue6af",
                    type: this.isMarkupEnable
                        ? "over_tag_mode"
                        : "enter_tag_mode",
                    tip: this.isMarkupEnable
                        ? this.$t(
                            "message.cadViewer.paramSelect.barNames.over_tag_mode"
                        )
                        : this.$t(
                            "message.cadViewer.paramSelect.barNames.enter_tag_mode"
                        ),
                    optType: "0,1,2,3",
                    disableByResult: true,
                    disabled: false
                },
                {
                    icon: "\ue7d6",
                    type: "sign_file",
                    tip: this.$t(
                        "message.cadViewer.paramSelect.barNames.sign_file"
                    ),
                    optType: "0",
                    disabled: false
                },
            ],
            font: [
                {
                    value: "ＭＳ Ｐゴシック",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[0]"
                    ),
                },
                {
                    value: "ＭＳ Ｐ明朝",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[1]"
                    ),
                },
                {
                    value: "MS UI Gothic",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[2]"
                    ),
                },
                {
                    value: "ＭＳ ゴシック",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[3]"
                    ),
                },
                {
                    value: "ＭＳ 明朝",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[4]"
                    ),
                },
                {
                    value: "Yu Gothic UI",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[5]"
                    ),
                },
                {
                    value: "メイリオ",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[6]"
                    ),
                },
                {
                    value: "游ゴシック",
                    label: this.$t(
                        "message.cadViewer.paramSelect.fontNames[7]"
                    ),
                },

                // 
            ],
            soild: [
                {
                    value: 0,
                    label: this.$t(
                        "message.cadViewer.paramSelect.lineTypeNames[0]"
                    ),
                },
                {
                    value: 1,
                    label: this.$t(
                        "message.cadViewer.paramSelect.lineTypeNames[1]"
                    ),
                },
                {
                    value: 2,
                    label: this.$t(
                        "message.cadViewer.paramSelect.lineTypeNames[2]"
                    ),
                },
                {
                    value: 3,
                    label: this.$t(
                        "message.cadViewer.paramSelect.lineTypeNames[3]"
                    ),
                },
                {
                    value: 4,
                    label: this.$t(
                        "message.cadViewer.paramSelect.lineTypeNames[4]"
                    ),
                },
            ],
            left_iconfont: [
                {
                    icon: "\ue6b6",
                },
                {
                    icon: "\ue6be",
                },
                {
                    icon: "\ue6bd",
                },
                {
                    icon: "\ue6bf",
                },
                {
                    icon: "\ue6bc",
                },
                {
                    icon: "\ue6ba",
                },
                {
                    icon: "\ue6b5",
                },
                {
                    icon: "\ue6b9",
                },
                {
                    icon: "\ue6b8",
                },
                {
                    icon: "\ue6b7",
                },
                {
                    icon: "\ue6c1",
                },
                {
                    icon: "\ue6c0",
                },
            ],

            fillTypeList: [
                {
                    value: 0,
                    label: this.$t(
                        "message.cadViewer.paramSelect.fillTypeNames[0]"
                    ),
                },
                {
                    value: 1,
                    label: this.$t(
                        "message.cadViewer.paramSelect.fillTypeNames[1]"
                    ),
                },
                {
                    value: 2,
                    label: this.$t(
                        "message.cadViewer.paramSelect.fillTypeNames[2]"
                    ),
                },
            ],

            selectedFont: "",
            selectedFontSize: "",
            selectedLineType: "",
            selectedLineWidth: "",
            selectedFillType: "",

            selectedLineColor: "#FC0000",
            selectedFillColor: "#FC0000",

            selectedBold: false,
            selectedItalics: false,
            selectedUnderline: false,
            showMarkups: true,

            activeLayerId: "",

            predefineColors: [
                "#FF4500",
                "#FF8C00",
                "#FFD700",
                "#90EE90",
                "#00CED1",
                "#1E90FF",
                "#C71585",
                "#FC0000",
            ],
        };
    },

    props: {
        selectedShapeParam: {},
        isAble: false,
        isMarkupEnable: Boolean,

        activeLayerIndex: {
            type: Number,
            default: -1,
        },
        layersData: {
            type: Array,
            default: null,
        },
        id: {
            type: String,
            default: null,
        },
        optType: Number,
    },
    watch: {
        selectedShapeParam(val) {
            console.log("selectedShapeParam  change", val);
            this.selectedFont = val.selectedFont;
            this.selectedFontSize = val.selectedFontSize;
            this.fontWidth = val.selectedFontSize;

            this.selectedBold = val.selectedBold;
            this.selectedItalics = val.selectedItalics;
            this.selectedUnderline = val.selectedUnderline;

            this.selectedLineType = Number(val.selectedLineType);
            this.selectedLineWidth = val.selectedLineWidth;

            this.selectedLineColor = val.selectedLineColor;
            this.selectedFillColor = val.selectedFillColor;

            this.selectedFillType = val.selectedFillType;
        },

        isMarkupEnable(newName, oldName) {
            this.iconfont_list[4].type = this.isMarkupEnable
                ? "over_tag_mode"
                : "enter_tag_mode";

            if (newName) this.iconClick("show_markups");
        },

        activeLayerIndex(val) {
            if (val == -1) this.activeLayerId = "";
            else this.activeLayerId = val;
        },
    },
    methods: {
        onLayerChange(e) {
            console.log(e);
            this.$emit("onActiveLayerSelect", e);
        },

        iconClick(e) {
            if (e == "show_markups") this.showMarkups = true;
            else if (e == "hide_markups") this.showMarkups = false;

            this.$emit("onMenuClick", e);
        },

        onBoldClick(e) {
            this.selectedBold = !this.selectedBold;
            this.onParamsChange();
        },

        onItalicsClick(e) {
            this.selectedItalics = !this.selectedItalics;
            this.onParamsChange();
        },

        onUnderlineClick(e) {
            this.selectedUnderline = !this.selectedUnderline;
            this.onParamsChange();
        },

        onParamsChange() {
            console.log("onParamsChange");
            console.log(this.getParamsSelect());
            this.$emit("handleSelectChange", this.getParamsSelect());
        },

        getParamsSelect() {
            console.log('this.selectedFillColor', this.selectedFillColor);
            let lang = getLocalStorage("lang");
            let defaultFont = this.font.slice(-1)[0].value;
            return {
                selectedFont:
                    this.selectedFont == ""
                        ? /* this.font[0].value */ defaultFont
                        : this.selectedFont,
                selectedFontSize:
                    this.selectedFontSize == "" ? "10" : this.selectedFontSize,
                fontWidth:
                    this.selectedFontSize == "" ? "10" : this.selectedFontSize,

                selectedBold: this.selectedBold,
                selectedItalics: this.selectedItalics,
                selectedUnderline: this.selectedUnderline,
                selectedLineType:
                    this.selectedLineType == ""
                        ? this.soild[0].value
                        : this.selectedLineType,
                selectedLineWidth:
                    this.selectedLineWidth == ""
                        ? "4"
                        : this.selectedLineWidth /* default linewidth=4 */,
                selectedLineColor:
                    this.selectedLineColor == ""
                        ? "#ffFF00"
                        : this.selectedLineColor,
                selectedFillColor: this.selectedFillColor || "rgba(255, 255, 0, 0)",
                selectedFillType:
                    this.selectedFillType == ""
                        ? this.fillTypeList[0].value
                        : this.selectedFillType,
            };
        },

        onResetViewClick() {
            this.$emit("handleResetViewClick", {});
        },

        onMenuClick(e) {
            if (e == 3) this.$emit("handlePrintClick", {});
        },
        onDownLoadClick() {
            this.$emit("handleDownLoadClick", {});
        },

        changeColors(e) {
            this.selectedLineColor = e;
            this.selectedFillColor = e;
            this.onParamsChange();
        },
    },
    mounted() {
        window.onclick = () => {
            // this.$refs.selectedLineColor.openStatus = false;
            // this.$refs.selectedFillColor.openStatus = false;
        };

        // debugger
        let resultPermiss = this.$isEnablePermission('/BHView');

        this.iconfont_list.forEach(e => {
            if (e.disableByResult) {
                e.disabled = resultPermiss
            }
        })
    },
};
</script>
<style lang="scss" scoped>
.b-content {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: rgba(245, 245, 245, 1);
    border: 1px solid rgba(226, 226, 226, 1);
    border-bottom: 1px solid #b4b4b4;

    .unable-style {
        position: absolute;
        width: 100%;
        height: 48px;
        background: rgba(255, 255, 255, 0.5);
        z-index: 5;
    }

    .icon-view {
        margin-left: 3px;
    }

    .solid-view {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .solid {
            width: 1px;
            height: 28px;
            margin: 0 8px;
            background: rgba(217, 217, 217, 1);
        }

        .iconfont {
            font-size: 24px;
            cursor: pointer;
            // color: rgba(149, 149, 149);
            margin: 0 8px;
        }

        ::v-deep .el-button+.el-button {
            margin-left: 2px;
        }

        .layer-select {
            ::v-deep .el-input__inner {
                height: 24px;
                background: rgba(252, 252, 252, 1);
                border-radius: 2px;
                border: 1px solid rgba(204, 204, 204, 1);
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }
    }

    .input-view {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 8px;

        .l-ipt {
            margin-right: 16px;

            ::v-deep .el-input__inner {
                width: 124px;
                height: 24px;
                background: rgba(252, 252, 252, 1);
                border-radius: 2px;
                border: 1px solid rgba(204, 204, 204, 1);
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }

        .s-ipt {
            ::v-deep .el-input__inner {
                width: 47px;
                height: 24px;
                background: rgba(252, 252, 252, 1);
                border-radius: 2px;
                border: 1px solid rgba(204, 204, 204, 1);
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }

        .m-ipt {
            ::v-deep .el-input__inner {
                width: 65px;
                height: 24px;
                background: rgba(252, 252, 252, 1);
                border-radius: 2px;
                border: 1px solid rgba(204, 204, 204, 1);
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }
    }

    .color-view {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .solid {
            width: 1px;
            height: 28px;
            margin: 0 8px;
            background: rgba(217, 217, 217, 1);
        }

        .l-ipt {
            margin-right: 16px;

            ::v-deep .el-input__inner {
                width: 110px;
                height: 24px;
                background: rgba(252, 252, 252, 1);
                border-radius: 2px;
                border: 1px solid rgba(204, 204, 204, 1);
            }

            ::v-deep .el-input__icon {
                line-height: 24px;
            }
        }

        .fill {
            width: 24px;
            height: 24px;
            margin: 0 8px;

            ::v-deep .el-color-picker__trigger {
                width: 24px;
                height: 24px;
            }
        }

        .iconfont {
            font-size: 24px;
        }
    }

    .down {
        position: absolute;
        right: 24px;
        font-size: 24px;
        cursor: pointer;
        color: rgba(0, 0, 0, 1);
    }
}

.font-btn {
    width: 24px !important;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: whitesmoke;
    border: 0 none;
    color: rgb(89, 89, 89);

    .iconfont {
        font-size: 24px;
        // cursor: pointer;
    }
}

.font-btn-active {
    background: rgba(220, 220, 220, 1);
    border-radius: 4px;
    border: 1px solid rgba(189, 189, 189, 1);
    width: 24px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 none;
    color: rgb(89, 89, 89);

    .iconfont {
        font-size: 24px;
        // cursor: pointer;
    }
}

::v-deep .el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
    background-color: transparent;
    border: 0 none;
    color: #c0c4cc;
}

::v-deep .el-color-picker__mask {
    background-color: transparent;
}

::v-deep .m-colorPicker .box {
    width: 212px;
    z-index: 666;
}

::v-deep .m-colorPicker {
    margin: 0 8px;
}

::v-deep .el-color-picker__icon {
    display: none;
}

::v-deep .el-color-picker--mini .el-color-picker__trigger {
    padding: 0;
}

::v-deep .el-color-dropdown {
    position: relative;
    z-index: 9999;
}
</style>
